<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>layout</title>
	<script src="./d3.v3.min.js"></script>
	<style>
	  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
  
  rect {
    fill: lightgray;
    stroke: black;
    stroke-width: 1px;
  }
  
  line {
  shape-rendering: crispEdges;
  stroke: #000000;
  }

  line.minor  {
    stroke: #777777;
    stroke-dasharray: 2,2;
  }

  path.domain {
    fill: none;
    stroke: black;
  }
	</style>
</head>
<body>
  <svg id="Histogram"></svg>
	<svg id="pie"></svg>
  <svg id="pack"></svg>
  <script>
	  // histogram 直方图
		d3.json("tweets.json", function(error, data) { histogram(data.tweets) })

		function histogram(tweetsData) {
		  var xScale = d3.scale.linear().domain([ 0, 5 ]).range([ 0, 500 ])
			var yScale = d3.scale.linear().domain([ 0, 10 ]).range([ 400, 0 ])

			var xAxis = d3.svg.axis().scale(xScale).ticks(5).orient("bottom")
			var histoChart = d3.layout.histogram()

			histoChart.bins([ 0, 1, 2, 3, 4, 5 ]).value(function(d) {
				 return d.favorites.length;
			});

			histoData = histoChart(tweetsData);

			d3.select("#Histogram").selectAll("rect").data(histoData).enter()
          .append("rect").attr("x", function(d) {
                 return xScale(d.x);
          }).attr("y", function(d) {
                 return yScale(d.y);
          }).attr("width", xScale(histoData[0].dx) - 2)
          .attr("height", function(d) {
                 return 400 - yScale(d.y);
          }).on("click", function(){console.log(1)});

		  d3.select("#Histogram").append("g").attr("class", "x axis")
		          .attr("transform", "translate(0,400)").call(xAxis);

      d3.select("g.axis").selectAll("text").attr("dx", 50);
		}


		// pie 饼图
		var pieChart = d3.layout.pie();
		var yourPie = pieChart([1,1,2]); // 把Original dataset变成Transformed dataset

		var newArc = d3.svg.arc();
		newArc.outerRadius(100);

		d3.select("#pie")
     .append("g")
     .attr("transform","translate(250,250)")
     .selectAll("path")
     .data(yourPie)
     .enter()
     .append("path")
     .attr("d", newArc)
     .style("fill", "blue")
     .style("opacity", .5)
     .style("stroke", "black")
     .style("stroke-width", "1px");

		 // pack 打包图, 适合继承关系
		d3.json("tweets.json",function(error,data) {pack(data.tweets)});

		function pack(incData) {
		  nestedTweets = d3.nest()
				.key(function (el) {return el.user})
				.entries(incData);
				console.log(nestedTweets)

			var packableTweets = {id: "root", values: nestedTweets}
      var depthScale = d3.scale.category10([0,1,2]);
			var	packChart = d3.layout.pack();
					packChart.size([500,500])
					.children(function(d) {return d.values})
				 .value(function(d) {return d.retweets.length + d.favorites.length + 1});

			d3.select("#pack")
				.append("g")
				//.attr("transform", "translate(0,0)")
				.selectAll("circle")
				.data(packChart(packableTweets))
				.enter()
				.append("circle")
				.attr("r", function(d) {return d.r - (d.depth * 10)}) // calculate margin for example
				.attr("cx", function(d) {return d.x})
				.attr("cy", function(d) {return d.y})
				.style("fill", function(d) {return depthScale(d.depth)})
				.style("stroke", "black")
				.style("stroke", "2px")

		}

	</script>
	
</body>
</html>
